<%-- 
    Document   : frmMalla
    Created on : 2/12/2011, 04:45:01 PM
    Author     : RIPLEY
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<script src="Recursos/js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="Recursos/js/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
<link href="Recursos/js/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css"/>

<%-- Incluimos la función ajax. --%>
<jsp:include page="ajax.html" flush="true"/>

    <script type="text/javascript">

        $(document).ready(function () {            
            $('#mensaje').dialog({                
                autoOpen: false,
                width: 600,
                buttons: {
                    "Ok": function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
        
        
    function o(){$('#mensaje').dialog('open');}

</script>

<script language="javascript">

   function GetCursos(){
       var selGrado = frmFilters.ddlGrado.options[frmFilters.ddlGrado.selectedIndex].id;
       var x =nuevoAjax();
       x.open("POST","listaCursos.jsp?grado="+selGrado,true);
       x.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       x.send();
       x.onreadystatechange=function(){
           if(x.readyState ==4){
               var respuesta=x.responseText;
               document.getElementById("cursos").innerHTML =respuesta;}
       }
   }
   
   function InsertMalla(ncursos){
       var descripcion = frmFilters.txtDescripcion.value;
       var x =nuevoAjax();
       x.open("POST","insertarMalla.jsp?descripcion="+descripcion
           +"&ncursos="+ncursos,true);
       x.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       x.send();
       x.onreadystatechange=function(){
           o();
           if(x.readyState ==4){
               var respuesta=x.responseText;
               document.getElementById("mensaje").innerHTML =respuesta;}
       }
   }
   
       function addRow(cursoStr) {
        var split = cursoStr.split(",");
        var table = document.getElementById("tbMalla");
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        
        var cell1 = row.insertCell(0);
        cell1.innerHTML = split[0] ;
        
        var cell2 = row.insertCell(1);
        cell2.innerHTML = split[1] ;
        
        var cell3 = row.insertCell(2);
        cell3.innerHTML = split[2] ;
        
        var cell4 = row.insertCell(3);
        cell4.innerHTML = split[3] ;
    }
    
    function InsertarMalla(){
        var table = document.getElementById("tbMalla");
        var rowCount = table.rows.length;
        var i;
        var ncursos="";
        for(i=1;i<rowCount;i++){            
            var row = table.rows[i];
            var cell = row.cells[0];
            var content = cell.firstChild.nodeValue;
            ncursos+=content+",";
        }        
        InsertMalla(ncursos);
    }
   
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Gestor de mallas</title>
    </head>
    <body>
        <h1>Malla Curricular(Plan de estudios)</h1>        
        <form name="frmFilters">
        <table>
            <tr>
                <td>
                    Nivel
                </td>
                <td>
                    <select name="ddlNivel" onchange="Cambia()">                    
                        <option value="Primaria" name="71" id="71" >Primaria</option>
                        <option value="Secundaria" name="72" id="72" >Secundaria</option>
                    </select>
                </td>
            </tr>
            
            <tr>
                <td>
                    Grado
                </td>
                <td>
                    <select name="ddlGrado" onchange="GetCursos()">                    
                        <option value="Primero" id="1" >Primero</option>
                        <option value="Segundo" id="2" >Segundo</option>
                        <option value="Tercero" id="4" >Tercero</option>
                        <option value="Cuarto"  id="5" >Cuarto</option>
                        <option value="Quinto"  id="6" >Quinto</option>
                    </select>
                </td>
            </tr>
            
            <tr>
                <td>
                    Descripcion
                </td>
                <td>
                    <textarea id="txtDescripcion"
                              cols="50" rows="8"
                              name="txtDescripcion"></textarea>
                </td>
            </tr>
            
        </table>
            
            <div id="cursos" style="background-color: silver;" >            
            </div>
            
            <div id="mensaje" style="background-color: silver;" >            
            </div>            
        </form>
        
      
        
    </body>
</html>
